<template>
  <virtual-table-layout :form-title="`客户信息表(${queryParams.pageNo})`">
    <virtual-table
      :handler-get-list="getDetail"
      v-model:page-no="queryParams.pageNo"
      v-model:page-data="pageData"
      :total="queryParams.total"
      :page-size="queryParams.pageSize"
    >
      <view v-for="(page, key) in pageData" :key="page.pageNo">
        <view class="pm-pt-item mb10" v-for="(item, key) in page.list" :key="'pm-pt-item_' + key">
          <d-card>
            <d-forms disabled label-width="200rpx">
              <d-forms-item label="客户名称" :input="item.organizationName"></d-forms-item>
              <d-forms-item label="人员姓名" :input="item.handlingPersonnel"></d-forms-item>
              <d-forms-item label="职务" :input="item.job"></d-forms-item>
              <d-forms-item label="年龄段" :input="item.customerAge"></d-forms-item>
              <d-forms-item label="部门" :input="item.customerDepartment"></d-forms-item>
              <d-forms-item label="性别" :input="item.systemUserSex"></d-forms-item>
              <d-forms-item label="项目名称" :input="item.projectName"></d-forms-item>
              <d-forms-item label="项目态度" :input="item.projectAttitude"></d-forms-item>
              <d-forms-item label="管理层次" :input="item.managementLevel"></d-forms-item>
              <d-forms-item label="办公电话" :input="item.officePhone"></d-forms-item>
              <d-forms-item label="手机号码" :input="item.phone"></d-forms-item>
              <d-forms-item label="电子邮箱" :input="item.emailBox"></d-forms-item>
              <d-forms-item label="备注" :input="item.customerComments"></d-forms-item>
            </d-forms>
          </d-card>
        </view>
      </view>
    </virtual-table>
  </virtual-table-layout>
</template>

<script setup lang="ts">
import {usePmCustomInfoApi} from "@/api/pm/project/customInfo";

const triggered = ref<boolean>(false);
const pageData = ref<VirtualTableData<PmCustomInfoForm>[]>([]);

function getDetail() {
  return new Promise((resolve, reject) => {
    if (projectNumber.value) {
      usePmCustomInfoApi().getCustomerInformationPage({
        projectNumber: projectNumber.value,
        ...queryParams
      }).then(res => {
        if (res.code === 0 && res.data) {
          queryParams.total = res.data.total;
          resolve(res.data.list);
        } else {
          reject(res.data)
        }
      }).catch((err) => {
        reject(err);
      })
    } else {
      resolve([])
    }
  })
}

const queryParams = reactive<{
  pageSize: number,
  pageNo: number,
  total: number,
}>({
  pageSize: 5,
  pageNo: 1,
  total: 0,
})

const projectNumber = ref<string>();
onLoad((query) => {
  projectNumber.value = query['project_number'];
  getDetail()
})
</script>

<style scoped lang="scss">

</style>
